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How I made these animations 

A lot of folks send me e-mail asking how these animations were made. The process I use is 
a laborious one that I can't really recommend if you want to do this regularly. 

My technique evolved from an experiment with my CAD program. I'd just purchased 
Building the Atkinson Cycle Engine- and was having a difficult time visualizing how the 
engine's unique linkage worked. Once I saw the GIF file in motion, I thought it was so cool 
I got carried away and made a bunch more. Then, of course, I had to show them off. ...So 
the Animated Engine pages were bom. 

Since then, maintaining this site has blossomed into a rewarding hobby in its own right. 

But now, I'm looking into alternatives to reduce the work load so I can get more pictures 
published faster. If you really want to do it my way, here's an outline. Please understand 
that this not a complete tutorial. 

Here are the steps: 

i Create a drawing in a CAD program. 

«i Copy it several times and move the parts in each copy a little to suggest the 
motion. 

# Export each copy to a separate image file. 

# Combine the images to create an animated GIF image. 

The CAD program takes center stage. A CAD (Computer Aided Design) program is a 
computerized drafting board. DesignCAD is the one I use, but I think any decent CAD 
program would do, as long as it has the ability to export images. Most of the work has to do 
with using the CAD program itself, so I'll defer to the user's manual for that part. 

Note: You should be very handy with your CAD program before attempting to create an 
animation this way... and CAD programs all seem to have a fairly steep learning 
curve. If you're brand-new to this, plan on spending a few weeks just learning how 
to use the CAD tool. If you learn how to write macros for your CAD program 
you'll be ahead of the game, but it's not absolutely necessary. 
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Once the basic drawing is complete, combine or 'group' all the lines and curves that form 
each moving part. Then combine all the remaining, non-moving lines into a 'background' 
group. This makes it easier to manipulate individual parts without disturbing other things in 
the drawing. In the above drawing, the groups are also distinguished by their color: red, 
green, blue and the black background group. 

Duplicate the entire drawing several times to create the individual frames. The number of 
frames varies depending on the detail you want, etc. This example uses 16 frames, which 
seems to be about the minimum. I've written a macro for my CAD program to make this 

task easier. 

Now comes the most laborious part... each moving part is moved just a smidge for each 
frame. This takes a little practice and planning to make sure the animation works smoothly. 

Usually I start with the crankshaft and adjust the rest of the parts to match. If you have 16 
frames, then your crank should rotate 22.5 degrees for each frame (360/16 = 22.5). I have 
another macro to duplicate and rotate parts, since this is such a common operation. The 
illustration below shows the drawing dupUcated with the crankshaft already rotated. 
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If there are spoked wheels or gears in your drawing, you have to be extra careful with the 
number of frames you choose, or the parts might appear to be rotating too fast, two slow, or 
backwards-like wagon wheels in an old western movie. My solution is to make sure the 
gears rotate exactly 1/2 tooth (or some odd multiple) per frame. This might mean you have 
to re-arrange the number of frames or gear teeth. 



Parts like connecting rods and pistons must be manipulated 'by hand' to correspond to the 
new position of the crank. I usually have to draw a few lines & arcs to figure out the new 
position of each part. Here's a typical sequence of operations: 
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When I'm done with that step, the drawing looks like this: 




Next I add the 'gas bubbles' and other effects. This makes the illustration much easier to 
understand, but it's so tedious I've skipped it on a number my animations, including this 
one... sorry, that's just too much work! 

Then each frame is 'exported' to a separate image file. It's important to make sure the 
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images are all the same size and orientation so the frames align correctly. Another macro 
accomplishes this task. 

Finally I combine the separate frames into an animated GIF file. I use PolyView (a terrific 
shareware image utility) for this step. An animated GIF is an image file that contains several 
frames intended to be played back in sequence. It's probably the simplest type of animation 
available on the web. Most browsers have built-in support for displaying them. 



Here's the result: 




I'm sure there are better tools out there for doing this sort of thing. If you decide to try doing 
it my way, let me know. I'll try to answer any questions you might have, but as you can see, 
this is a complicated process so I can't make any promises! 

Good luck! 

-Matt 
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